<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu
          mode="horizontal"
          :ellipsis="false"
          background-color="#224B8F"
          text-color="#fff"
          active-text-color="#fff"
        >
          <el-menu-item index="1">
            <!-- <img class="logo" src="../assets/logo.png" alt=""> -->
            <img class="title" src="../assets/title.png" alt="" />
          </el-menu-item>
          <!-- 让这个元素占满多余的空间,目的是方便设置布局样式 -->
          <div class="flex-grow" />
          <el-sub-menu index="2">
            <template #title>
              <img class="headImg" src="../assets/head_default.jpg" alt="" />
              &emsp;{{ username }}
            </template>
            <el-menu-item index="2-1">修改信息</el-menu-item>
            <el-menu-item index="2-2" @click="logout">退出登录</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            class="leftMenu"
            :default-active="store.state.activePath.path"
            :collapse="isCollapse"
            active-text-color="#20A0FF"
            background-color="#324057"
            text-color="#BFC6E1"
            :router="true"
          >
            <!-- 上面添加touter的作用: 是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。 -->
            <el-sub-menu
              v-for="item in menus"
              :index="item.order + ''"
              :key="item.id"
            >
              <template #title>
                <el-icon>
                  <!-- 转化 -->
                  <component :is="iconsObj[item.id]"></component>
                </el-icon>
                <!-- 展示标题 -->
                <span>{{ item.authName }}</span>
              </template>
              <!-- 提前导入设置到对象中, -->
              <!-- updatePath函数的参数: index对应的路径  一级标题 二级标题 -->
              <!-- :index====>  :to -->
              <el-menu-item
                v-for="child in item.children"
                :index="'/' + child.path"
                :key="child.id"
                @click="
                  updatePath('/' + child.path, item.authName, child.authName)
                "
                >{{ child.authName }}</el-menu-item
              >
            </el-sub-menu>
            <div class="collapse_handle" @click="logout">
            <el-icon>
              <Edit />
            </el-icon>
            <span v-if="!isCollapse">退出登录</span>
          </div>
          </el-menu>
        </el-aside>
        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item>{{
              store.state.activePath.name1
            }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{
              store.state.activePath.name2
            }}</el-breadcrumb-item>
          </el-breadcrumb>
          <!-- 卡片组件,设置白色背景边框的等样式 -->
          <el-card>
            <router-view></router-view>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { getMenus } from "../tools/ajax";
import { ref, reactive } from "vue";
import { useStore } from "vuex";
import {ElMessage} from "element-plus"
import { useRouter } from "vue-router";
import {
  User,
  Goods,
  TakeawayBox,
  DataLine,
  SetUp
} from "@element-plus/icons-vue";

const router = useRouter(); // 获取路由
const store = useStore();
const menus = reactive([]);
const username = store.state.username || "用户名"
const iconsObj = {
  125: <User />,
  103: <SetUp />,
  101: <Goods />,
  102: <TakeawayBox />,
  145: <DataLine />,
};

getMenus().then((res) => {
  // console.log(res);
  menus.push(...res.data);
});
function updatePath(path, name1, name2) {
  store.commit("setPath", { path, name1, name2 });
}
function logout(){
    // 清空本地数据
    sessionStorage.clear()
    ElMessage.success("安全退出")
    setTimeout(() => {
      // 刷新页面
      // location.reload()
      router.push("/Login");
    }, 800);
  }
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  height: 100vh;
  overflow: hidden;
}
.flex-grow {
  flex-grow: 1;
}
.header {
  padding: 0;
  .el-menu-item {
    height: 60px;
  }
  .el-menu-item.is-active {
    border-bottom-color: transparent;
    background-color: #224b8f;
  }
}
.title {
  height: 40px;
  position: relative;
  // left: -20px;
}
.headImg {
  width: 30px;
  border-radius: 50%;
}

.el-aside {
  transition: 0.5s ease-out 0.4s;

  .leftMenu {
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;

    .collapse_handle {
      height: 56px;
      color: #bfc6e1;
      line-height: 56px;
      padding: 0 20px;
      text-align: left;
      cursor: pointer;
      overflow: hidden;

      .el-icon {
        margin: 0 5px;
        width: 18px;
        height: 18px;
        vertical-align: middle;
      }
    }
    .collapse_handle:hover {
      background-color: #283346;
    }
    .el-sub-menu .el-menu-item {
      background-color: #283346;
      height: 46px;
    }
    .el-sub-menu .el-menu-item:hover,
    .el-sub-menu .el-menu-item.is-active {
      background-color: rgb(58, 95, 138);
    }
  }
}

.el-main {
  background-color: rgb(223, 229, 230);
  height: calc(100vh - 60px);

  .el-card {
    margin-top: 20px;
    height: calc(100% - 40px);
    overflow-y: auto;
  }
}
</style>